<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>

		
			<div id="casher">
				<h2>社区便利店收银系统</h2>
				<input type="text" value="" id="result" disabled="disabled" />
				<table border="1" id="t_info">
					<tr>
						<th>商品名称</td>
							<th>价格</td>
								<th>添加</td>
					</tr>
					<tr>
						<td>三只松鼠牛肉片100g</td>
						<td>￥19.9/包</td>
						<td><input type="button" value="+" onclick="add(19.9)" /></td>
					</tr>
					<tr>
						<td>雪媚娘蛋黄卷 500g</td>
						<td>￥9.8包</td>
						<td><input type="button" value="+" onclick="add(9.8)" /></td>
					</tr>
					<tr>
						<td>米老头谷多多 300g</td>
						<td>￥12.8/包</td>
						<td><input type="button" value="+" onclick="add(12.8)" /></td>
					</tr>
					<tr>
						<td>亲亲薯片袋装 60g</td>
						<td>￥2.7/袋</td>
						<td><input type="button" value="+" onclick="add(2.7)" /></td>
					</tr>
					<tr>
						<td>旺旺仙贝 400g</td>
						<td>￥16.9/包</td>
						<td><input type="button" value="+" onclick="add(16.9)" /></td>
					</tr>

				</table>
				<input class="btn" type="button" value="结算" onclick=" checkout() " id="btn_checkout" />&nbsp;&nbsp;&nbsp;
				<input class="btn " type="button" value="交易完成 " onclick="reload() " /></div>
		</body>

</html>

<script>
	function add(price){
		var result=document.getElementById("result").value;
		if(result == ""){
			document.getElementById("result").value=price;
		}else{
			document.getElementById("result").value=result+"+"+price;
		}
	}
	
	function checkout(){
		var result = document.getElementById("result").value;
		if(result == ""){
			return;
		}
		var prices = result.split("+");
		var total=0.0;
		for(var idx=0;idx<prices.length;idx++){
			total+=parseFloat(prices[idx]);
		}
		total= Math.round(total*100)/100;
		document.getElementById("result").value="总金额："+total;
		document.getElementById("btn_checkout").disabled=true;
		document.getElementById("t_info").style.opacity=0.4;
	}
	
	function reload(){
		window.location.reload();
	}
</script>

<style>
	#casher {
		font-size: 14px;
		font-family: "微软雅黑";
		width: 400px;
		text-align: center;
	}
	
	table {
		margin: 10px auto;
		width: 340px;
		border-collapse: collapse;
		text-align: center;
	}
	
	th,
	td {
		font-size: 15px;
		height: 33px;
	}
	
	#result {
		width: 338px;
		height: 40px;
		.btn {
			font-size: 14px;
			height: 26px;
			width: 75px;
		}
	}
</style>